<template>
  <div class="epidemicmsg">
    <div class="m-header">
      <div>疫情风险提示></div>
      <div>疫情信息通报记录</div>
      <span class="bq-back" @click="back">＜返回</span>
    </div>
    <div class="e-body">
      <div class="bq-all">
        <span class="xian"></span>
        疫情信息通报记录
      </div>
      <div class="e-add">
        <button class="m-add" @click="addepidemic">新增播报信息</button>
        <div class="sousuo" @click="searchInfo">
          <svg title="搜索 " class="iconsousuo ic" aria-hidden="true">
            <use xlink:href="#iconsousuo" />
          </svg>
        </div>
        <div class="e-search">
          <div class="select">
            <span>项目名称：</span>
            <el-input v-model="projectName" placeholder="项目名称"></el-input>
            <!-- <el-select v-model="value1" placeholder="父项目名称">
              <el-option
                v-for="item in options1"  
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>-->
          </div>
          <div class="select">
            <span>播报时间：</span>
            <el-date-picker
              v-model="upTime"
              type="date"
              format="yyyy 年 MM 月 dd 日"
              value-format="yyyy-MM-dd"
              placeholder="选择日期时间"
            ></el-date-picker>
          </div>
          <div class="select">
            <span>是否解决：</span>
            <el-select clearable v-model="isDone" placeholder="请输入">
              <el-option
                v-for="item in options2"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </div>
        </div>
      </div>
      <div class="m-table">
        <ul class="myProject-from-title">
          <li style="width:8%">编号</li>
          <li>父项目名称</li>
          <li>子项目名称</li>
          <li style="width:10.28%">创建者</li>
          <li style="width:22.28%">疫情信息</li>
          <li>播报时间</li>
          <li style="width:10.28%">状态</li>
          <li>操作</li>
        </ul>
        <ul class="myProject-from-nav" v-for="(item, index) in infoList" :key="index">
          <li style="width:8%">{{ index + 1 }}</li>
          <li>{{ item.parentProjectName }}</li>
          <li>{{ item.subProjName }}</li>
          <li style="width:10.28%">{{ item.modifier }}</li>
          <li style="width:22.28%">{{ item.riskMsg }}</li>
          <li>{{ item.upTime }}</li>
          <li
            style="width:10.28%"
            :style="{ color: item.isDone === 0 ? 'red' : '#666' }"
          >{{ item.isDone === 0 ? "未解决" : "已解决" }}</li>
          <li>
            <img src="../../assets/images/fill-view.png" @click="detailsmsg(item.id)" />
            <img src="../../assets/images/edit.png" @click="altermsg(item.id)" />
            <img src="../../assets/images/remove.png" @click="delmsg(item.id)" />
          </li>
        </ul>
        <ul v-if="showData" style="text-align:center">暂无数据</ul>
      </div>
      <div class="m-page">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page.current"
          :page-sizes="[10]"
          :page-size="page.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.total"
        ></el-pagination>
      </div>
    </div>
    <!-- 新增弹出框 -->
    <div class="alterbox" v-show="addmsg">
      <div class="mainalter-box" style="height:350px">
        <div class="mainalter-box-body">
          <div class="mainalter-box-bodybox">
            <div class="bq-all">
              <span class="xian"></span>
              疫情信息新增
              <div class="cha" @click="cancelmsg"></div>
            </div>
            <div class="alert-select">
              <span>
                <em>*</em>父项目名称
              </span>
              <el-select
                v-model="addEpidemicMsg.parentProjId"
                placeholder="请输入"
                @change="parentHandleChange"
              >
                <el-option
                  v-for="item in projectList"
                  :key="item.id"
                  :label="item.parentProjectName"
                  :value="item.id"
                ></el-option>
              </el-select>
              <!-- <input
                type="text"
                v-model="addEpidemicMsg.parentProjectName"
                placeholder="请输入"
              />-->
            </div>
            <div class="alert-select">
              <span>子项目名称</span>
              <!-- <input
                type="text"
                v-model="addEpidemicMsg.subProjName"
                placeholder="请输入"
              />-->
              <el-select v-model="addEpidemicMsg.subProjId" placeholder="请输入">
                <el-option
                  v-for="item in childList"
                  :key="item.id"
                  :label="item.subProjName"
                  :value="item.id"
                ></el-option>
              </el-select>
            </div>
            <!-- <div class="mainalter-box-inputbox">
              <span>创建者</span>
              <input
                type="text"
                v-model="addEpidemicMsg.creator"
                placeholder="请输入"
              />
            </div>
            <div class="mainalter-box-inputbox">
              <span>播报时间</span>
              <input
                type="text"
                v-model="addEpidemicMsg.upTime"
                placeholder="请输入"
              />
            </div>-->
            <div class="mainalter-box-textbox">
              <span>
                <i>*</i>风险播报内容
              </span>
              <textarea rows="4" v-model="addEpidemicMsg.riskMsg"></textarea>
            </div>
          </div>
        </div>
        <div class="mainalter-box-button">
          <button class="bc" @click="addEpidemicMsgBtn">确定</button>
          <button class="tj" @click="cancelmsg">取消</button>
        </div>
      </div>
    </div>
    <!-- 预览弹出层 -->
    <div class="alterbox" v-show="detailmsg">
      <div class="mainalter-box">
        <div class="mainalter-box-body">
          <div class="mainalter-box-bodybox">
            <div class="bq-all">
              <span class="xian"></span>
              项目信息预览
              <div class="cha" @click="cancelmsg"></div>
            </div>
            <div class="mainalter-box-inputbox">
              <span>父项目名称</span>
              <input readonly type="text" v-model="previewMsg.parentProjectName" />
            </div>
            <div class="mainalter-box-inputbox">
              <span>子项目名称</span>
              <input readonly type="text" placeholder="暂无子项目" v-model="previewMsg.subProjName" />
            </div>
            <div class="mainalter-box-inputbox">
              <span>创建者</span>
              <input readonly type="text" v-model="previewMsg.creator" />
            </div>
            <div class="mainalter-box-inputbox">
              <span>播报时间</span>
              <input readonly type="text" v-model="previewMsg.upTime" />
            </div>
            <div class="mainalter-box-textbox">
              <span>风险播报内容</span>
              <textarea readonly rows="4" v-model="previewMsg.riskMsg"></textarea>
            </div>
          </div>
        </div>
        <!-- <div class="mainalter-box-button">
          <button class="bc">确定</button>
          <button class="tj" @click="subCancel">取消</button>
        </div>-->
      </div>
    </div>
    <!-- 修改弹出层 -->
    <div class="alterbox" v-show="altmsg">
      <div class="mainalter-box">
        <div class="mainalter-box-body">
          <div class="mainalter-box-bodybox">
            <div class="bq-all">
              <span class="xian"></span>
              疫情信息修改
              <div class="cha" @click="cancelmsg"></div>
            </div>
            <div class="mainalter-box-checkbox">
              <span class="title">
                <em>*</em>疫情信息状态
              </span>
              <el-radio v-model="updateMsg.isDone" label="1">已解决</el-radio>
              <el-radio v-model="updateMsg.isDone" label="0">未解决</el-radio>
            </div>
            <div class="alert-select">
              <span>
                <em>*</em>父项目名称
              </span>
              <!-- <input
                type="text"
                v-model="updateMsg.parentProjectName"
                placeholder="ppp环境治理"
              />-->
              <el-select
                v-model="updateMsg.parentProjId"
                placeholder="请输入"
                @change="UpdateParentHandleChange"
              >
                <el-option
                  v-for="item in projectList"
                  :key="item.id"
                  :label="item.parentProjectName"
                  :value="item.id"
                ></el-option>
              </el-select>
            </div>
            <div class="alert-select">
              <span>子项目名称</span>
              <!-- <input
                type="text"
                v-model="updateMsg.subProjName"
                placeholder="揭阳市污水治理"
              />-->
              <el-select v-model="updateMsg.subProjId" placeholder="请输入">
                <el-option
                  v-for="item in childList"
                  :key="item.id"
                  :label="item.subProjName"
                  :value="item.id"
                ></el-option>
              </el-select>
            </div>
            <div class="mainalter-box-inputbox">
              <span>创建者</span>
              <input disabled type="text" v-model="updateMsg.creator" placeholder="张三" />
            </div>
            <div class="mainalter-box-inputbox">
              <span>播报时间</span>
              <input disabled type="text" v-model="updateMsg.upTime" placeholder="2019-02-02" />
            </div>
            <!-- <div class="mainalter-box-inputbox">
              <span>修改者</span>
              <input
                type="text"
                v-model="updateMsg.upUser"
                placeholder="张三"
              />
            </div>
            <div class="mainalter-box-inputbox">
              <span>修改时间</span>
              <input
                type="text"
                v-model="updateMsg.upUser"
                placeholder="2019-02-02"
              />
            </div>-->
            <div class="mainalter-box-textbox">
              <span>
                <i>*</i>风险播报内容
              </span>
              <textarea rows="4" v-model="updateMsg.riskMsg"></textarea>
            </div>
          </div>
        </div>
        <div class="mainalter-box-button">
          <button class="bc" @click="updateBtn">确定</button>
          <button class="tj" @click="cancelmsg">取消</button>
        </div>
      </div>
    </div>
    <!-- 删除弹出框 -->
    <div class="delbox" v-show="delMsg">
      <div class="mdel">
        <div class="bq-all">
          <span class="xian"></span>
          疫情信息删除
          <div class="cha" @click="cancelmsg"></div>
        </div>
        <div class="mdel-body">你确定要删除该项目的全部信息吗?</div>
        <div class="mdel-button">
          <button class="bc" @click="delBtn(id)">确定</button>
          <button class="tj" @click="cancelmsg">取消</button>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss">
.epidemicmsg {
  //标题
  .m-header {
    line-height: 60px;
    margin-left: 20px;
    font-family: "Microsoft YaHei";
    overflow: hidden;
    div {
      float: left;
    }
    .bq-back {
      float: right;
      color: #333;
      margin-right: 20px;
      cursor: pointer;
    }
  }
  .e-body {
    width: 98%;
    margin: auto;
    background-color: #fff;
    .bq-all {
      margin: 0 20px;
      height: 60px;
      line-height: 60px;
      font-size: 16px;
      font-weight: bold;
      color: #333;
      position: relative;
      .xian {
        width: 3px;
        height: 16px;
        background: #1ab394;
        display: inline-block;
        position: relative;
        top: 1px;
        margin-left: 10px;
        margin-right: 8px;
      }
    }
    .e-add {
      width: 94%;
      margin: auto;
      overflow: hidden;
      .m-add {
        float: right;
        background-color: #357165;
        border: 1px solid #357165;
        border-radius: 4px;
        top: 0px;
        right: 130px;
        color: #fff;
        width: 120px;
        height: 32px;
        margin-top: 5px;
        margin-right: 10px;
        cursor: pointer;
      }
      .sousuo {
        float: right;
        background-color: #357165;
        border: 1px solid #357165;
        // border: 1px solid #1ab394;
        cursor: pointer;
        border-radius: 4px;
        margin-right: 10px;
        margin-top: 5px;
        width: 30px;
        height: 30px;
        text-align: center;
        position: relative;
        svg {
          width: 18px;
          height: 18px;
          margin-top: 8px;
          position: absolute;
          top: 0;
          bottom: 0;
          left: 0;
          right: 0;
          margin: auto;
          fill: #fff;
          cursor: pointer;
        }
      }
      .e-search {
        // margin-left: 20px;
        overflow: hidden;
        // display: flex;
        .select {
          float: left;
          flex: 1;
          margin-bottom: 30px;
          margin-right: 20px;
          .el-input {
            width: 200px;
          }
        }
      }
    }
    .m-table {
      width: 94%;
      max-height: 600px;
      margin: 20px auto;
      .myProject-from-title {
        width: 100%;
        height: 39px;
        text-align: center;
        line-height: 39px;
        border-bottom: 1px solid #edeff2;
        li {
          float: left;
          width: 12.28%;
        }
      }

      .myProject-from-nav {
        width: 100%;
        height: 40px;
        line-height: 40px;
        text-align: center;

        li {
          float: left;
          width: 12.28%;
          height: 40px;

          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          img {
            width: 16px;
            height: 16px;
            margin-left: 12px;
            margin-top: 7px;
            cursor: pointer;
          }
        }
      }
      .myProject-from-nav:nth-child(2n + 1) {
        background-color: #f5f5f5;
      }
      .myProject-from-nav:hover {
        background-color: #c3d8da;
      }
    }
    .m-page {
      width: 94%;
      margin: auto;
      text-align: right;
    }
  }
  //新增弹出框
  //修改弹出框
  .alterbox {
    width: 100%;
    height: 100%;
    background-color: rgba(207, 207, 207, 0.6);
    position: fixed;
    top: 0;
    left: 0;
    // display: none;
    .alert-select {
      margin-top: 10px;
      float: left;
      width: 50%;
      span {
        display: block;
        margin-left: 10px; 
        em {
          font-size: 14px;
          color: #f56c6c;
          margin-right: 4px;
        }
      }
      input {
        margin-left: 10px;
        height: 32px;
        line-height: 32px;
      }
      .el-select {
        width: 95%;
        height: 34px;
        line-height: 34px;
      }
    }
    .mainalter-box {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      width: 40%;
      height: 450px;
      background-color: #fff;
      .mainalter-box-body {
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
        background: #fff;
        padding: 20px;
        .mainalter-box-bodybox {
          width: 100%;
          .bq-all {
            width: 100%;
            height: 34px;
            line-height: 34px;
            font-size: 16px;
            font-weight: bold;
            color: #333;
            border-bottom: 2px solid #f2f2f2;
            position: relative;
            .xian {
              width: 3px;
              height: 16px;
              background: #1ab394;
              display: inline-block;
              position: relative;
              top: 1px;
              margin-left: 10px;
              margin-right: 8px;
            }
            .cha {
              cursor: pointer;
              height: 20px;
              width: 20px;
              position: absolute;
              top: 5px;
              right: 10px;
              background: url("../../assets/images/ckls17.png") no-repeat;
            }
          }
          .mainalter-box-checkbox {
            color: #707070;
            // margin-right: 52px;
            margin-top: 10px;
            width: 100%;
            height: 30px;
            float: left;
            .title {
              margin-right: 20px;
              margin-left: 10px;
              em {
                font-size: 14px;
                color: #f56c6c;
                margin-right: 4px;
              }
            }
            .el-radio__input.is-checked .el-radio__inner {
              border-color: #1ab394;
              background: #1ab394;
            }
            .el-radio__input.is-checked + .el-radio__label {
              color: #1ab394;
            }
            //            .el-checkbox__input.is-checked >>> el-checkbox__inner{
            //     background-color: #1ab394;
            //     border-color: #1ab394;
            // }
          }
          .mainalter-box-inputbox {
            color: #707070;
            // margin-right: 52px;
            margin-top: 10px;
            width: 50%;
            float: left;
            span {
              // width: 30%;
              display: block;
              margin-left: 10px;
              em {
                font-size: 14px;
                color: #f56c6c;
                margin-right: 4px;
              }
            }
            input {
              width: 90%;
              margin-left: 10px;
              height: 32px;
              margin-top: 4px;
              border-radius: 4px;
              border: 1px solid #ccc;
              background: #fff;
              padding-left: 12px;
            }
          }
          .mainalter-box-textbox {
            color: #707070;
            // margin-right: 52px;
            margin-top: 10px;
            width: 100%;
            float: left;
            span {
              width: 30%;
              display: block;
              margin-left: 10px;
              i {
                font-size: 14px;
                color: #f56c6c;
                margin-right: 4px;
              }
            }
            textarea {
              width: 97%;
              height: 128px;
              margin-top: 4px;
              border-radius: 4px;
              border: 1px solid #ccc;
              background: #fff;
              line-height: 30px;
              color: #707070;
              font-size: 14px;
              margin-left: 10px;
            }
          }
        }
      }
      .mainalter-box-button {
        padding-top: 24px;
        display: flex;
        padding-bottom: 24px;
        justify-content: center;
        // border-top: 2px solid rgb(239, 240, 245);
        background: #fff;
        button {
          width: 120px;
          height: 32px;
          text-align: center;
          line-height: 34px;
          border-radius: 4px;
          cursor: pointer;
        }
        .bc {
          border: 1px solid #357165;
          color: #357165;
          margin-right: 24px;
          background: #fff;
        }
        .tj {
          border: 1px solid #357165;
          color: #fff;
          background: #357165;
          margin-right: 24px;
        }
      }
    }
  }
  //删除弹出框
  .delbox {
    width: 100%;
    height: 100%;
    background-color: rgba(184, 184, 184, 0.6);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    .mdel {
      width: 400px;
      height: 250px;
      background-color: #fff;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      .bq-all {
        width: 100%;
        height: 34px;
        line-height: 34px;
        font-size: 16px;
        font-weight: bold;
        color: #333;
        border-bottom: 2px solid #f2f2f2;
        position: relative;
        .xian {
          width: 3px;
          height: 16px;
          background: #1ab394;
          display: inline-block;
          position: relative;
          top: 1px;
          margin-left: 10px;
          margin-right: 8px;
        }
        .cha {
          height: 20px;
          width: 20px;
          position: absolute;
          top: 5px;
          right: 10px;
          background: url("../../assets/images/ckls17.png") no-repeat;
        }
      }
      .mdel-body {
        line-height: 150px;
        color: #333;
        text-align: center;
      }
      .mdel-button {
        padding-top: 24px;
        display: flex;
        padding-bottom: 24px;
        justify-content: center;
        // border-top: 2px solid rgb(239, 240, 245);
        background: #fff;
        button {
          width: 120px;
          height: 32px;
          text-align: center;
          line-height: 34px;
          cursor: pointer;
        }
        .bc {
          border: 1px solid #357165;
          color: #357165;
          margin-right: 24px;
          background: #fff;
        }
        .tj {
          border: 1px solid #357165;
          color: #fff;
          background: #357165;
          margin-right: 24px;
        }
      }
    }
  }
}
</style>
<script>
import {
  addInfo,
  queryAllInfo,
  delInfo,
  showParentInfo,
  showChildInfo,
  queryInfoById,
  updateInfo
} from "../../service/EpidemicMsg/index.js";
export default {
  data() {
    return {
      id: "", //每行数据的id
      infoList: [], //表格信息列表
      projectName: "", //首页项目名称
      upTime: "", //播报时间
      isDone: "", //是否解决
      projectList: [], //父项目下拉列表,
      childList: [], //子项目下拉列表
      addmsg: false,
      showData: false,
      previewMsg: {}, //预览界面对象
      addEpidemicMsg: {
        parentProjId: null,
        subProjId: null,
        riskMsg: null
      }, //新增界面对象
      updateMsg: {
        isDone: 0,
        parentProjId: null,
        subProjId: null,
        riskMsg: null
      }, //修改界面对象
      // 搜索条件父项目名称
      options1: [
        {
          value: "选项1",
          label: "ppp污水治理"
        },
        {
          value: "选项2",
          label: "高级项目"
        }
      ],
      value1: "",
      options2: [
        {
          value: 0,
          label: "未解决"
        },
        {
          value: 1,
          label: "已解决"
        }
      ],
      //分页
      page: {
        current: 1,
        size: 10,
        total: 0
      },
      value2: "",
      // 详情
      detailmsg: false,
      // 修改
      altmsg: false,
      //删除
      delMsg: false,
      radio: "1"
    };
  },
  created() {
    this.findInfo();
    showParentInfo().then(res => {
      this.projectList = res.data.obj;
    });
  },
  methods: {
    //查询疫情信息的方法
    findInfo() {
      let param = {
        pageNum: this.page.current,
        pageSize: this.page.size,
        projectName: this.projectName,
        upTime: this.upTime,
        isDone: this.isDone
      };
      // window.console.log(param);
      queryAllInfo(param).then(res => {
        this.infoList = res.data.obj.rows;
        this.page.total = res.data.obj.total;
        if (this.page.total === 0) {
          this.showData = true;
        } else {
          this.showData = false;
        }
      });
    },
    //搜索
    searchInfo() {
      this.page.current = 1;
      this.findInfo();
    },
    //父项目下拉框值改变时,查询子项目下拉列表
    parentHandleChange(val) {
      showChildInfo(val).then(res => {
        this.childList = res.data.obj;
        // window.console.log(this.childList)
        // window.console.log(res);
        if (this.childList.length > 0) {
          this.addEpidemicMsg.subProjId = this.childList[0].id;
        } else {
          this.addEpidemicMsg.subProjId = null;
        }
      });
    },
    UpdateParentHandleChange(val) {
      showChildInfo(val).then(res => {
        this.childList = res.data.obj;
        window.console.log(this.childList);
        if (this.childList.length > 0) {
          this.updateMsg.subProjId = this.childList[0].id;
        } else {
          this.updateMsg.subProjId = null;
        }
      });
    },
    //返回
    back() {
      this.$router.push({ path: "/epidemicRisk" });
    },
    //新增
    addepidemic() {
      this.addmsg = true;
    },
    //新增页面确认按钮
    addEpidemicMsgBtn() {
      if (this.addEpidemicMsg.parentProjId === null) {
        this.$message({
          message: "请选择父项目",
          type: "warning"
        });
        return;
      }
      if (this.addEpidemicMsg.riskMsg === null) {
        this.$message({
          message: "请输入信息",
          type: "warning"
        });
        return;
      }
      addInfo(this.addEpidemicMsg).then(res => {
        if (res.data.status === 200) {
          this.$message({
            message: res.data.msg,
            type: "success"
          });
          this.findInfo();
          this.addEpidemicMsg = {
            parentProjId: null,
            subProjId: null,
            riskMsg: null
          };
          this.addmsg = false;
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
    //预览
    detailsmsg(param) {
      this.detailmsg = true;
      queryInfoById(param).then(res => {
        //  window.console.log(res)
        this.previewMsg = Object.assign({}, res.data.obj);
      });
    },
    //修改
    altermsg(param) {
      queryInfoById(param)
        .then(res => {
          this.updateMsg = Object.assign({}, res.data.obj);
          this.updateMsg.isDone = this.updateMsg.isDone.toString();
        })
        .then(() => {
          showChildInfo(this.updateMsg.parentProjId).then(res => {
            this.childList = res.data.obj;
            this.altmsg = true;
          });
        });
    },
    //确认修改
    updateBtn() {
      // window.console.log("修改",this.updateMsg.riskMsg)
      if (this.updateMsg.riskMsg === null || this.updateMsg.riskMsg == "") {
        // this.message.error("请输入风险播报信息");
        this.$message({
          message: "请输入风险播报信息",
          type: "warning"
        });
      } else {
        updateInfo(this.updateMsg).then(res => {
          if (res.data.status === 200) {
            this.$message({
              message: res.data.msg,
              type: "success"
            });
            this.findInfo();
            this.altmsg = false;
          }
        });
      }
    },
    //删除
    delmsg(id) {
      this.delMsg = true;
      this.id = id;
    },
    //删除页面确认按钮
    delBtn(id) {
      delInfo(id).then(res => {
        if (res.data.status === 200) {
          this.$message({
            message: res.data.msg,
            type: "success"
          });
          // window.console.log(this.page.total);
          if (this.page.total % 10 === 1 && this.page.current !== 1) {
            this.page.current--;
            // window.console.log(this.page.current);
          }
          this.findInfo();
          this.delMsg = false;
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
    //取消
    cancelmsg() {
      this.addEpidemicMsg = {
        parentProjId: null,
        subProjId: null,
        riskMsg: null
      };
      this.addmsg = false;
      this.detailmsg = false;
      this.altmsg = false;
      this.delMsg = false;
    },
    //分页
    // eslint-disable-next-line no-unused-vars
    handleSizeChange(val) {
      // window.console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.page.current = val;
      this.findInfo();
    }
  }
};
</script>
